<!DOCTYPE html>
<html>
<head>
    <title>{$category.name}</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <include file="public@head"/>
</head>
<body class="body-white">
<include file="public@nav"/>
<div class="container">
    <h2>{$category.name}</h2>

    <div id="container" class="masonary-container">
        <div class="grid-sizer"></div>
        <php>
            $where=[
            'post.create_time'=>['egt',0]
            ];
        </php>
        <articles item="vo" field="*" where="$where" limit="0,8" order="post.create_time DESC" page="10"
                  relation="categories"
                  categoryIds="$category.id">
            <php>
                $more=json_decode($vo['more'], true);
            </php>

            <div class="item">
                <div class="tc-gridbox">
                    <div class="header">

                        <if condition="!empty($more['thumbnail'])">
                            <div class="item-image">
                                <a href="{:url('portal/article/index',array('id'=>$vo['id'],'cid'=>$category['id']))}">
                                    <img src="{:sp_get_asset_upload_path($more['thumbnail'])}"
                                         class="img-responsive" alt="{$vo.post_title}">
                                </a>
                            </div>
                            <else/>
                        </if>

                        <h3>
                            <a href="{:url('portal/article/index',array('id'=>$vo['id'],'cid'=>$category['id']))}">{$vo.post_title}</a>
                        </h3>
                        <hr>
                    </div>
                    <div class="body">
                        <a href="{:url('portal/article/index',array('id'=>$vo['id'],'cid'=>$category['id']))}">{$vo.post_excerpt}</a>
                    </div>
                    <div class="footer">
                        <div class="pull-left">
                            <span class="meta">{:date('Y-m-d H:i:s',$vo.create_time)}</span>
                        </div>
                        <div class="pull-right">
                            <a href="javascript:;"><i class="fa fa-eye"></i><span>{$vo.post_hits}</span></a>
                            <a href="{:url('article/do_like',array('id'=>$vo['id']))}"
                               class="js-count-btn"><i class="fa fa-thumbs-up"></i><span
                                    class="count">{$vo.post_like}</span></a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </articles>
    </div>

    <div class="js-infinite-scroll-loading text-center" style="display: none;">正在加载...</div>
    <div id="nextpage"></div>


    <include file="public@footer"/>
</div>


<!-- JavaScript -->
<include file="public@scripts"/>
<script src="__TMPL__/public/assets/js/imagesloaded.pkgd.min.js"></script>
<script src="__TMPL__/public/assets/js/masonry.pkgd.min.js"></script>
<script src="__TMPL__/public/assets/js/jquery.infiniteScroll.js"></script>
<script>
    $(function(){
        var $container= $('#container').masonry({
            columnWidth : '.grid-sizer',
            itemSelector : '.item'
        });

        $container.imagesLoaded().progress(function (imgLoad, image) {
            var msnry = $container.data('masonry');
            var itemSelector = msnry.options.itemSelector;
            var $item = $(image.img).parents(itemSelector);
            $('.tc-gridbox',$item).css('opacity',1);
            msnry.layout();
        });

        $('#nextpage').infiniteScroll({
            loading:'.js-infinite-scroll-loading',
            total_pages:1,
            success:function(content){
                var $items=$(content).find('#container .item');
                if($items.length>0){
                    //$('.tc-gridbox',$items).css('opacity',1);
                    $container.append( $items )
                    // add and layout newly prepended items
                        .masonry( 'appended', $items );
                    $items.imagesLoaded().progress(function (imgLoad, image) {
                        var msnry = $container.data('masonry');
                        var itemSelector = msnry.options.itemSelector;
                        var $item = $(image.img).parents(itemSelector);
                        $('.tc-gridbox',$item).css('opacity',1);
                        msnry.layout();
                    });
                }
            },
            finish:function(){

            }
        });
    });
</script>
</body>
</html>